<!-- Created by henian.xu on 2018/8/24. -->

<template>
    <Page :title="pageTitle">
        <Container>
            <Divider orientation="left">theme 主题</Divider>
            <div class="pa-a">
                <Button
                    class="ma-l ma-b"
                    v-for="(item,index) in ['normal','main','second','primary','success','warning','danger','info']"
                    :key="index"
                    :theme="item"
                    :label="item"
                    radius
                />
            </div>
            <Divider orientation="left">disabled 禁用</Divider>
            <div class="pa-a">
                <Button
                    class="ma-l ma-b"
                    v-for="(item,index) in ['normal','main','second','primary','success','warning','danger','info']"
                    :key="index"
                    :theme="item"
                    :label="item"
                    radius
                    disabled
                />
            </div>
            <Divider orientation="left">plain 素平</Divider>
            <div class="pa-a">
                <Button
                    class="ma-l ma-b"
                    v-for="(item,index) in ['normal','main','second','primary','success','warning','danger','info']"
                    :key="index"
                    :theme="item"
                    :label="item"
                    radius
                    plain
                />
            </div>
            <Divider orientation="left">radius 圆角</Divider>
            <div class="pa-a">
                <Button
                    class="ma-l ma-b"
                    label="normal"
                />
                <Button
                    class="ma-l ma-b"
                    label="radius"
                    radius
                />
                <Button
                    class="ma-l ma-b"
                    label="radius all"
                    radius="all"
                />
            </div>
            <Divider orientation="left">size 大小</Divider>
            <div class="pa-a">
                <Button
                    class="ma-l ma-b"
                    v-for="(item,index) in ['super','more','big','normal','small','mini']"
                    :key="index"
                    :size="item"
                    :label="item"
                    radius
                />
            </div>

            <PageBar
                class="ma-b"
                v-for="(item,index) in ['','radius','all']"
                :key="index"
            >
                <Button
                    theme="main"
                    icon="&#xf003;"
                    label="icon"
                    :radius="item||false"
                />
                <Button
                    theme="second"
                    :radius="item||false"
                >
                    <div 
                        class="inner" 
                        slot="inner"
                    >
                        <i class="f-icon fs-big">&#xf003;</i>
                        <div class="label lh-1em">label</div>
                    </div>
                </Button>
                <Button
                    theme="primary"
                    icon="&#xf003;"
                    label="label"
                    subLabel="sub label"
                    innerClass="ta-l"
                    :radius="item||false"
                />
            </PageBar>
        </Container>
    </Page>
</template>

<script>
import pageMixin from '@/mixins/page';

export default {
    name: 'ButtonPage',
    mixins: [pageMixin],
    data() {
        return {};
    },
};
</script>

<style lang="scss">
</style>
